<template>
  <div>
    <div class="container">
      <el-form
        class="c_form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item
          :label="$t('产品SN码')"
          prop="goods_sn"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.goods_sn"
            :placeholder="$t('填写sn码，如n')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('产品型号')"
          prop="goods_name"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.goods_name"
            :placeholder="$t('请输入产品型号')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('您的联系方式')"
          prop="take_phone"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.take_phone"
            :placeholder="$t('请输入您的电话号码')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('上传购物凭证')"
          prop="buy_image"
          class="c_form_item"
        >
          <el-upload
            class="avatar-uploader"
            action="https://admin.eprosmartlife.com/api/index/upload"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :limit="1"
            accept=".jpeg,.png,.jpg,.bmp,.gif"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpeg/png或其他图片文件
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div class="c_button_view">
        <el-button class="c_button" @click="submitForm">{{
          $t("下一步")
        }}</el-button>
      </div>
    </div>
    <div class="container_mobile">
      <el-form
        class="c_form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        label-position="top"
      >
        <el-form-item
          :label="$t('产品SN码')"
          prop="goods_sn"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.goods_sn"
            :placeholder="$t('填写sn码，如n')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('产品型号')"
          prop="goods_name"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.goods_name"
            :placeholder="$t('请输入产品型号')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('您的联系方式')"
          prop="take_phone"
          class="c_form_item"
        >
          <el-input
            v-model="ruleForm.take_phone"
            :placeholder="$t('请输入您的电话号码')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('上传购物凭证')"
          prop="buy_image"
          class="c_form_item"
        >
          <el-upload
            class="avatar-uploader"
            action="https://admin.eprosmartlife.com/api/index/upload"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :limit="1"
            accept=".jpeg,.png,.jpg,.bmp,.gif"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpeg/png或其他图片文件
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div class="c_button_view">
        <el-button class="c_button" @click="submitForm">{{
          $t("下一步")
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!/^[1][3,4,5,6.7,8,9][0-9]{9}$/.test(value)) {
        return callback(new Error(this.$t("请输入正确的电话号码")));
      } else {
        callback();
      }
    };
    var checkStr = (rule, value, callback) => {
      if (!/[a-zA-Z0-9]/.test(value)) {
        return callback(new Error(this.$t("请填写正确的sn码，如n")));
      } else {
        callback();
      }
    };
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisibleMobile: false,
      ruleForm: {
        goods_sn: "",
        goods_name: "",
        take_phone: "",
        buy_image: "",
      },
      rules: {
        goods_sn: [
          {
            required: true,
            validator: checkStr,
            trigger: "blur",
          },
        ],
        goods_name: [
          {
            required: true,
            message: this.$t("请输入产品型号"),
            trigger: "blur",
          },
        ],
        take_phone: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        buy_image: [
          {
            required: true,
            message: this.$t("上传购物凭证"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("next", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上传成功
    handleSuccess(res) {
      this.ruleForm.buy_image = res.data;
    },
    //放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(this.$store.state.isMobile)
      // if(this.$s){

      // }
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container {
    display: block;
  }

  .container_mobile {
    display: none;
  }

  .c_form {
    padding: 0 240rem;

    .c_form_item {
      margin-top: 86rem;
    }
  }

  .c_button_view {
    display: flex;
    justify-content: center;
    margin: 200rem 0;

    .c_button {
      width: 600rem;
      height: 100rem;
      background: #333333;
      border-radius: 20rem;
      font-size: 30rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }
}

@media (max-width: 900px) {
  .container {
    display: none;
  }

  .container_mobile {
    display: block;
  }

  .c_form {
    padding: 0 10px;

    .c_form_item {
      margin-top: 30px;
    }
  }

  .c_button_view {
    display: flex;
    justify-content: center;
    margin: 20px 0;

    .c_button {
      width: 300px;
      height: 44px;
      background: #333333;
      border-radius: 7px;
      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fefefe;
    }
  }
  :deep(.el-input__inner) {
    height: 40px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
  }
  :deep(.el-form-item__label) {
    text-align: right;
    vertical-align: middle;
    font-size: 13px;
    color: #333333;
    line-height: 30px;
    box-sizing: border-box;
  }
  :deep(.avatar-uploader .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  :deep(.avatar-uploader .el-upload:hover) {
    border-color: #409eff;
  }
  :deep(.el-upload--picture-card) {
    width: 133px;
    height: 133px;
    background-color: #fff;
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 7px;
    box-sizing: border-box;
    width: 133px;
    height: 133px;
    margin: 0 10px 10px 0;
    display: inline-block;
  }
  :deep(.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 133px;
    height: 133px;
    line-height: 133px;
    text-align: center;
  }
  :deep(.avatar) {
    width: 133px;
    height: 133px;
    display: block;
  }
}
</style>
<style>
@media (min-width: 900px) {
  .el-input__inner {
    height: 80rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 20rem;
  }

  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 30rem;
    color: #333333;
    line-height: 50rem;
    padding: 0 12rem 0 0;
    box-sizing: border-box;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .el-upload--picture-card {
    width: 400rem;
    height: 350rem;
    background-color: #fff;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6rem;
    box-sizing: border-box;
    width: 400rem;
    height: 350rem;
    margin: 0 8rem 8rem 0;
    display: inline-block;
  }

  .avatar-uploader-icon {
    font-size: 28rem;
    color: #8c939d;
    width: 400rem;
    height: 350rem;
    line-height: 350rem;
    text-align: center;
  }

  .avatar {
    width: 400rem;
    height: 350rem;
    display: block;
  }
}
</style>
